<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

        }

        .header {
            height: 161px;
            width: 100%;
            /* line-height: 161px; */
            background-color: #fff;
            font-size: 18px;
        }

        .header .left {
            margin-top: 43px;
            flex-wrap: wrap;
            display: flex;
            width: 400px;
        }

        .header .centre {
            width: 400px;
        }

        .header .centre input {
            margin-top: 43px;
            width: 380px;
            height: 42px;
            text-indent: 10px;
            border-radius: 42px;
            position: absolute;
        }

        .header .centre button {
            width: 100px;
            height: 40px;
            border-radius: 40px;
            background: rgb(250, 250, 3);
            position: relative;
            top: 46px;
            left: 280px;
            border: 0px solid #000;
        }

        .header .right {
            width: 400px;
        }

        .header p {
            font-size: 11px;
        }

        .header img {
            width: 75px;
            height: 75px;
            margin-right: 20px;
        }

        .wraper {
            width: 1000px;
            display: flex;
            margin: 100px auto;
            position: relative;
        }

        .wraper .m-show {
            margin-right: 30px;
            position: relative;
        }

        .wraper .m-show img {
            width: 282px;
            height: 282px;
        }

        .wraper li {
            list-style: none;
        }

        .wraper .m-choose {
            display: flex;
            justify-content: space-between;
            margin-right: 30px;
        }

        .wraper .m-choose img {
            width: 60px;
            height: 60px;
        }

        .wraper .g-right .h2 {
            font-size: 24px;
        }

        .wraper .g-right .price {
            font-size: 40px;
            font-weight: 600;
            color: #fa585a;
            line-height: 28px;
            margin-top: 50px;
        }

        .wraper .g-right .text {
            font-size: 20px;
        }

        .wraper .g-right button {
            background: rgb(250, 88, 90);
            width: 224px;
            height: 50px;
            border-radius: 4px;
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            line-height: 25px;
            display: block;
            float: right;
            margin-top: 100px;
            border: 0px solid #000;
        }

        .wraper .big-show {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0px;
            left: 282px;
            display: none;
            overflow: hidden;
        }

        .wraper .big-show img {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .mask {
            width: 150px;
            height: 150px;
            background: hsl(71, 97%, 44%, 0.3);
            pointer-events: none;
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div id="container">
            <div class="left">
                <img src=""
                    alt="">
                <div>
                    <h1>熊猫优选</h1>
                    <p>XIONG MAO YOU XUAN</p>
                </div>
            </div>
            <div class="centre">
                <input type="text" placeholder="搜索商品，发现更多优惠">
                <button>搜索</button>
            </div>
            <div class="right">

            </div>
        </div>
    </div>
    <div class="wraper"></div>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        //获取产品id
        function getProductId() {
            let url = location.href
            let params = url.substring(url.indexOf('?') + 1)
            let arr = params.split('=')
            let id = arr[1]
            return id
        }

        function product() {
            let id = getProductId()
            $.ajax({
                url: 'http://www.xiongmaoyouxuan.com/api/detail',
                type: 'get',
                data: {
                    id,
                },
                success: function (res) {
                    showProductDetail(res.data)
                    // console.log(res);
                },
                error: function (error) {
                    console.log(error);
                }
            })
        }
        product()

        function showProductDetail(data) {
            let str = `
            <div class="g-left">
            <div class="m-show">
                <img src="${data.detail.photo[0].url}" alt="">
                <div class="mask"></div>
            </div>
            <ul class="m-choose">
                <li><img src="${data.detail.photo[0].url}" width="80px" alt="1" onclick='move()'></li>
                <li><img src="${data.detail.photo[1].url}" width="80px" alt="2" onclick='move()'></li>
                <li><img src="${data.detail.photo[2].url}" width="80px" alt="3" onclick='move()'></li>
                <li><img src="${data.detail.photo[3].url}" width="80px" alt="4" onclick='move()'></li>
            </ul>
        </div>

        <div class="g-right">
            <h2>${data.share.title}</h2>
            <p class='text'>${data.share.text}</p>
            <p class='price'>￥${data.detail.originPrice}</p>
            <button>加入购物车</button>
        </div>
        <div class="big-show">
                <img src="${data.detail.photo[0].url}" alt="">
        </div>
    `
            $('.wraper').html(str)
            bigShow()
        }

        function move(e) {
            e = e || window.event
            let target = e.target || e.srcElement
            $('.m-show>img').prop('src', `${$(target).prop('src')}`)
            $('.big-show>img').prop('src', `${$(target).prop('src')}`)
            // console.log(this);
            // console.log($(target).prop('src'));
        }

        function bigShow() {
            $('.m-show').on('mouseover', function () {
                $('.big-show').css('display', 'block')
                $('.mask').css('display', 'block')
            })
            $('.m-show').on('mouseout', function () {
                $('.big-show').css('display', 'none')
                $('.mask').css('display', 'none')
            })
            $('.m-show').on('mousemove', function (e) {
                e = e || window.event
                // imgH()
                let w = parseInt($('.m-show').css('width')) * parseInt($('.big-show').css('width')) / parseInt($('.mask').css('width'))
                let h = parseInt($('.m-show').css('height')) * parseInt($('.big-show').css('height')) / parseInt($('.mask').css('height'))
                $('.big-show>img').css('width', w)
                $('.big-show>img').css('height', h)
                // console.log(w,h);
                let x = e.offsetX - parseInt($('.mask').css('width')) / 2
                let y = e.offsetY - parseInt($('.mask').css('height')) / 2
                if (x < 0) x = 0
                if (y < 0) y = 0
                if (x > parseInt($('.m-show').css('width')) - parseInt($('.mask').css('width'))) {
                    x = parseInt($('.m-show').css('width')) - parseInt($('.mask').css('width'))
                }
                if (y > parseInt($('.m-show').css('height')) - parseInt($('.mask').css('height'))) {
                    y = parseInt($('.m-show').css('height')) - parseInt($('.mask').css('height'))
                }
                $('.mask').css('top', y)
                $('.mask').css('left', x)
                //图片移动距离=遮罩层移动距离*（盒子显示大小/遮罩层大小）
                let m = x * ( parseInt($('.big-show').css('width'))/parseInt($('.mask').css('width')))
                let n = y * (parseInt($('.big-show').css('height'))/parseInt($('.mask').css('height')))
                $('.big-show>img').css('top', -n)
                $('.big-show>img').css('left', -m)
                // console.log($('.mask').css('height'));
            })
        }
    </script>
</body>

</html>